<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    html,body
    {
        padding: 0;
        margin:0;
        user-select: none;
    }
    .box
    {
        position: relative;
        width: 300px;
        height: 35px;
        background-color: aliceblue;
        line-height: 35px;
        margin: 20px auto;
    }
    .bg
    {
        position: absolute;
        height: 100%;
        background-color: rgb(6, 153, 1);

    }
    .text
    {
        position: absolute;
        width: 100%;
        margin: 0;
        text-align: center;
        z-index: 2;
    }
    .btn
    {
        position: absolute;
        width: 40px;
        height: 32px;
        top: 0;
        z-index: 3;
        border: 1px solid #ccc;
        cursor: pointer;
        background: #fff url() center no-repeat
    }
</style>
<body>
    <script>
        window.onload=function ()
        {
            function $(name)
            {
                return document.querySelector(name)
            }
            var btn=$(".btn")
            var box=$(".box")
            var text=$(".text")
            var bg=$(".bg")
            var flag=false
            btn.onmousedown=function(event)
            {
                var x=event.clientX;
                btn.onmousemove=function(event)
                {
                    var moveX=event.clientX-x
                    if(moveX>0)
                    {
                        this.style.left=moveX+"px";
                        bg.style.width=moveX+"px";
                        if(moveX>=box.offsetWidth-this.offsetWidth)
                        {
                            text.innerText="验证通过"
                            text.style.color="#fff"
                            btn.onmousedown=null
                            btn.onmousemove=null
                            flag=true;
                        }
                    }
                }
            }
            btn.onmouseup=function(event)
            {
                btn.onmousemove=null
                if(flag)
                {
                    return;
                }
                else
                {
                    this.style.left=0
                    bg.style.width=0
                }
            }
        }
    </script>
    <div class="box">
        <div class="btn"></div>
        <div class="text">拖动滑块验证</div>
        <div class="bg"></div>

    </div>
</body>
</html>